<template>
  <div class="box">
    <el-table
      ref="multipleTable"
      :data="imageList"
      tooltip-effect="dark"
      style="width: calc(100% - 2px);margin: 1px;"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        label="ID"
        show-overflow-tooltip>
        <template slot-scope="scope">
          <router-link tag="span" :to="'/Image/ImageContent/'+scope.row.Id" class="fontcolor">{{ scope.row.Id }}</router-link>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('Image_Label')"
        show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button style="background: #067FB5; color: #fff;" size="mini" v-for="item in scope.row.RepoTags" :key="item">{{ item }}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('Image_Size')"
        width="150px"
        show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.Size | imageSize }}
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('Image_CreateTime')"
        show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.Created | createdData }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      multipleSelection: []
    }
  },
  watch: {
    multipleSelection: function () {
      this.$emit('changecheck', this.multipleSelection)
    }
  },
  props: ['imageList'],
  methods: {
    handleSelectionChange (val) {
      this.multipleSelection = val
    }
  },
  filters: {
    // 处理时间戳
    createdData: (value) => {
      let date = new Date(value * 1000)
      let Y = date.getFullYear() + '-'
      let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      return Y + M + D + h + m + s
    },
    // 处理大小
    imageSize: (value) => {
      let num = Math.round(value / 1024 / 1024)
      return num + 'M'
    }
  }
}
</script>

<style lang="scss" scoped>
.box{
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 20px;
}
.fontcolor{
  color: #067FB5;
  cursor: pointer; // 鼠标移上去变小手
}
</style>
